<template>

  <div style="padding:10px;height:100%; ">
      <!-- <el-form :inline="true">
      
      <slot name="search" />

    </el-form> -->
    <el-table
      style="width:100%"
      :data="list"
      height="500px"
      v-loading="listLoading"
      element-loading-text="Loading"
      ref="table"
      border
    >

      <el-table-column
        align="center"
        type="index"
        width="50"
        label="序号"
        fixed="left"
      >
        <template slot-scope="scope">
          <span>{{(currentPage- 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <DataListItem
        v-bind:key="$index"
        v-for="(item,$index) in cols"
        :column="item"
      />

     

    </el-table>
    <el-pagination
      align="right"
      style="margin-top:20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 50, 100, 150, 200]"
      :page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.totalPage"
    >
    </el-pagination>
 
  </div>
</template>
<script>
import Vue from "vue";
import { getStaticsPage} from "@/api/分页"
import request from "@/utils/request";
import { getUser } from "@/utils/auth";
import EditDlg from "@/components/EditDlg";
import linq from "linq";
import axios from "axios";
import { uuid } from "vue-uuid";
import { debug } from 'util';
export default {
  props: ["cols","cate","name","fetchData","addQuery"],
  components: {
    EditDlg,
    DataListItem: {
      name: "DataListItem",
      template: `<el-table-column :label='column.label' :prop='column.prop' align="center">
          
          <DataListItem :key="$index" v-for="(item,$index) in column.data?column.data:[]" :column="item" />
          </el-table-column>
          `,
      props: ["column",]
    }
  },
  data: function() {
    return {
      model: {},

      listLoading: true,
      list: [],
       pageHelp:{limit:20,page:0},
      queryParam:'',
      currentPage: 1,
      order:'ID',
      totalPage:0,
      pageSize: 20,
      user: null
    };
  },

  async mounted() {
    //
     
    //
    await this.loadTable();
   
    
    //
  },

  methods: {
     async loadTable(){
      this.listLoading=true;
      
      var res = await getStaticsPage(this.name,this.$root.user.XXID,this.$root.user.CJPC,this.pageHelp,this.queryParam,this.order,this.addQuery)
      this.totalPage = res.total;
      this.list = res.values;
      this.listLoading=false;
    },
   
   
    handleSizeChange: function(size) {
      this.pageSize = size;
      this.pageHelp.page = (currentPage-1)*this.pageSize;
      this.pageHelp.limit = size;
      this.loadTable();
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.pageHelp.page = (currentPage-1)*this.pageSize;
       this.loadTable();
       
    },
    // onDlgCreated() {
    //   this.$parent.onDlgCreated ? this.$parent.onDlgCreated(this.model) : "";
    // },
   
  }
};
</script>